<template>
	<view class="member-level" :data-theme="themeStyle">
		<block v-if="levelList.length">
			<view class="banner-container">
				<view class="memberInfo">
					<image :src="$util.img(userInfo.headimg)" v-if="userInfo.headimg" @error="headimgError"
						mode="aspectFill"></image>
					<image :src="$util.getDefaultImage().default_headimg" v-else mode="aspectFill"></image>
					<view class="member-desc">
						<view class="font-size-toolbar">{{ userInfo.nickname }}</view>
						<view class="font-size-tag expire-time">ID：{{ userInfo.member_id }}</view>
					</view>
					<!-- 积分 -->
					<view class="user-point" @click="jumpPage('/otherpages/member/point/point')">
						<view>{{point}}</view>
						<text>我的积分</text>
					</view>
				</view>

				<swiper :style="{ width: '100vw', height: '390rpx' }" class="margin-bottom"
					:indicator-dots="swiperConfig.indicatorDots" :indicator-color="swiperConfig.indicatorColor"
					:indicator-active-color="swiperConfig.indicatorActiveColor" :autoplay="false"
					:interval="swiperConfig.interval" :duration="swiperConfig.duration"
					:circular="swiperConfig.circular" :previous-margin="swiperConfig.previousMargin"
					:next-margin="swiperConfig.nextMargin" @change="swiperChange" @animationfinish="animationfinish"
					:current="curIndex">
					<swiper-item :class="levelList.length == 1 ? 'image-container-box' : ''"
						v-for="(item, i) in levelList" :key="i">
						<view class="image-container" :class="[
								curIndex === 0
									? i === listLen - 1
										? 'item-left'
										: i === 1
										? 'item-right'
										: 'item-center'
									: curIndex === listLen - 1
									? i === 0
										? 'item-right'
										: i === listLen - 2
										? 'item-left'
										: 'item-center'
									: i === curIndex - 1
									? 'item-left'
									: i === curIndex + 1
									? 'item-right'
									: 'item-center'
							]">
							<view class="slide-image" style="background-size: 100% 100%;background-repeat:no-repeat"
								:style="{
									transform: curIndex === i ? 'scale(' + scaleX + ',' + scaleY + ')' : 'scale(1,1)',
									transitionDuration: '.3s',
									transitionTimingFunction: 'ease'
								}">
								<view class="bg-border" v-if="!item.store_image"></view>
								<image
									:src="item.store_image ? $util.img(item.store_image) : $util.img('upload/uniapp/level/card-bg.png')"
									:style="{'background-color':item.store_image ? '' : item.bg_color}"></image>
								<view class="info">
									<view class="level-detail" v-if="curIndex == 0">
										{{ levelList[curIndex].level_name }}会员
									</view>
									<view class="level-detail level-detail1" v-if="curIndex == 1">
										{{ levelList[curIndex].level_name }}会员
									</view>
									<view class="level-detail level-detail2" v-if="curIndex == 2">
										{{ levelList[curIndex].level_name }}会员
									</view>
									<view class="growr-name" :style="curIndex == 1 ? 'color:#D69C40' : curIndex == 2 ? 'color:#BCA27D':''">{{ levelList[curIndex].level_name }}可享受消费折扣和</view>
									<view class="growr-value" :style="curIndex == 1 ? 'color:#D69C40' : curIndex == 2 ? 'color:#BCA27D':''">会员大礼包等权益</view>
									<view class="growth-rules font-size-tag" @click="openExplainPopup"
										v-if="levelList[curIndex].remark != '' ">
										<text class="iconfont iconwenhao font-size-tag"></text>
									</view>
								</view>
							</view>
						</view>
					</swiper-item>
				</swiper>

				<view class="card-content" style="display: none;">
					<view class="card-content-head">
						<view class="line-box">
							<view class="line right"></view>
						</view>
						<view class="card-content-title">卡种选择</view>
						<view class="line-box">
							<view class="line"></view>
						</view>
						<view class="clear"></view>
					</view>
					<view class="card-time-list">
						<view class="card-item-box" :class="{small:  currCard.charge_rule_arr.length == 4}"
							v-for="(item, index) in currCard.charge_rule_arr" :key="index">
							<view class="card-time-item" :class="{active: choiceIndex == index}" @click="choice(index)">
								<image :src="$util.img('/upload/uniapp/level/card-icon.png')" mode="widthFix"></image>
								<view class="time-name">{{ cardType[item.key].name }}</view>
								<view class="time-price">
									{{ $lang('common.currencySymbol') }}
									<text class="price">{{ item.value }}</text>
									/{{ cardType[item.key].unit }}
								</view>
							</view>
						</view>
					</view>
				</view>

				<view class="card-content"
					v-if="currCard.is_free_shipping || currCard.consume_discount < 100 || currCard.point_feedback > 0">
					<!-- <view class="card-content-head">
						<image class="line" src="https://wanzhi.daqinfarmer.com/public/images/101682320918.png"></image>
						<view class="card-content-title1">尊享6大会员权益</view>
						<image class="line" src="https://wanzhi.daqinfarmer.com/public/images/431682320999.png"></image>
					</view> -->
					<image class="card-privilege-list" v-if="curIndex == 0"
						src="https://wanzhi.daqinfarmer.com/public/images/baiyinquanyi.png"></image>
					<image class="card-privilege-list" v-if="curIndex == 1"
						src="https://wanzhi.daqinfarmer.com/public/images/huangjinquanyi.png"></image>
					<image class="card-privilege-list" v-if="curIndex == 2"
						src="https://wanzhi.daqinfarmer.com/public/images/zuanshiquanyi.png"></image>
					<!-- <view v-if="currCard.send_coupon != '' || currCard.send_point > 0 || currCard.send_balance > 0">
						<view class="card-content-head">
							<view class="line-box"><view class="line right"></view></view>
							<view class="card-content-title">开卡礼包</view>
							<view class="line-box"><view class="line"></view></view>
							<view class="clear"></view>
						</view>
						<view class="card-privilege-list">
							<view class="card-privilege-item" v-if="currCard.send_point > 0">
								<view class="card-privilege-icon">
									<text class="iconfont iconjifen3"></text>
								</view>
								<view class="card-privilege-name">积分礼包</view>
								<view class="card-privilege-text">赠送{{currCard.send_point}}积分</view>
							</view>
							<view class="card-privilege-item" v-if="currCard.send_balance > 0">
								<view class="card-privilege-icon">
									<text class="iconfont iconhongbao"></text>
								</view>
								<view class="card-privilege-name">红包礼包</view>
								<view class="card-privilege-text">赠送{{ parseFloat(currCard.send_balance)}}红包</view>
							</view>
							<view class="card-privilege-item" v-if="currCard.send_coupon != ''">
								<view class="card-privilege-icon" >
									<text class="iconfont iconyouhuiquan1"></text>
								</view>
								<view class="card-privilege-name">优惠券礼包</view>
								<view class="card-privilege-text">赠送{{currCard.send_coupon.split(',').length}}张优惠券</view>
							</view>
						</view>
					</view> -->

				</view>

				<!-- 所属会员优惠券 -->
				<view class="card-content1" v-if="computedCouponList.length > 0" style="padding: 20rpx;">
					<view class="card-content-head">
						<image class="line" src="https://wanzhi.daqinfarmer.com/public/images/101682320918.png"></image>
						<view class="card-content-title">会员专享劵</view>
						<image class="line" src="https://wanzhi.daqinfarmer.com/public/images/431682320999.png"></image>
					</view>

					<view class="coupon-style-four">
						<view class="coupon-box" v-for="(item, index) in computedCouponList" :key="index">
							<view class="coupon-list">
								<image src="https://wanzhi.daqinfarmer.com/public/images/521682326605.png"></image>
								<view class="coupon">
									<view class="coupon-info" v-if="vipId == levelId">
										<view class="coupon-num" v-if="item.discount == '0.00'">
											<text class="font-size-tag coupon-sign">￥</text>
											<text class="coupon-size">{{ Number(item.money) }}</text>
										</view>
										<view class="coupon-num" v-else>
											<text class="coupon-size">{{ Number(item.discount) }}</text>
											<text class="font-size-tag coupon-sign">折</text>
										</view>
									</view>
									<view class="coupon-info" v-else @click="buyCard">
										<view class="coupon-num" v-if="item.discount == '0.00'">
											<text class="font-size-tag coupon-sign">￥</text>
											<text class="coupon-size">{{ Number(item.money) }}</text>
										</view>
										<view class="coupon-num" v-else>
											<text class="coupon-size">{{ Number(item.discount) }}</text>
											<text class="font-size-tag coupon-sign">折</text>
										</view>

									</view>
									<view class="coupon-get" v-if="vipId == levelId" @click="toGoodsList(item, index)">
										<view class="coupon-type">
											<text v-if="item.at_least > 0"
												class="">满{{ Number(item.at_least) }}元可用</text>
											<text v-else class="">无门槛优惠券</text>
										</view>
										<view class="btn_coupon">去使用</view>
									</view>
									<view class="coupon-get" v-else @click="buyCard">
										<view class="coupon-type">
											<text v-if="item.at_least > 0"
												class="">满{{ Number(item.at_least) }}元可用</text>
											<text v-else class="">无门槛优惠券</text>
										</view>
										<view class="btn_coupon">购买卡</view>
									</view>

								</view>
							</view>
						</view>
					</view>

				</view>


				<view class="card-content1 active_list">
					<view class="card-content-head">
						<image class="line" src="https://wanzhi.daqinfarmer.com/public/images/101682320918.png"></image>
						<view class="card-content-title">会员活动区</view>
						<image class="line" src="https://wanzhi.daqinfarmer.com/public/images/431682320999.png"></image>
					</view>

					<view class="flex-active" v-if="curIndex == 0">
						<image class="flex-active-bg"
							src="https://wanzhi.daqinfarmer.com//public/images/191682327486.png" mode=""></image>
						<view class="flex-active-img" v-if="vipId == levelId">
							<view @click="redirectToLink('/otherpages/diy/diy/diy?name=DIY_VIEW_RANDOM_1666951848')">
								<view>限时折扣</view>
								<view>立即抢购</view>
							</view>
							<view @click="redirectToLink('/otherpages/diy/diy/diy?name=DIY_VIEW_RANDOM_1666953967')">
								<view>拼团活动</view>
								<view>点击参与</view>
							</view>
						</view>
						<view class="flex-active-img" v-else>
							<view
								@click="redirectToLink('/otherpages/diy/diy/diy?name=DIY_VIEW_RANDOM_1666951848&buy=0&vip=0')">
								<view>限时折扣</view>
								<view>立即抢购</view>
							</view>
							<view
								@click="redirectToLink('/otherpages/diy/diy/diy?name=DIY_VIEW_RANDOM_1666953967&buy=0&vip=0')">
								<view>拼团活动</view>
								<view>点击参与</view>
							</view>
						</view>
					</view>
					<view class="flex-active" v-else-if="curIndex == 1">
						<image class="flex-active-bg"
							src="https://wanzhi.daqinfarmer.com//public/images/191682327486.png" mode=""></image>
						<view class="flex-active-img" v-if="vipId == levelId">
							<view @click="redirectToLink('/otherpages/diy/diy/diy?name=DIY_VIEW_RANDOM_1667016273')">
								<view>限时折扣</view>
								<view>立即抢购</view>
							</view>
							<view @click="redirectToLink('/otherpages/diy/diy/diy?name=DIY_VIEW_RANDOM_1667016308')">
								<view>拼团活动</view>
								<view>点击参与</view>
							</view>
						</view>
						<view class="flex-active-img" v-else>
							<view
								@click="redirectToLink('/otherpages/diy/diy/diy?name=DIY_VIEW_RANDOM_1667016273&buy=0&vip=1')">
								<view>限时折扣</view>
								<view>立即抢购</view>
							</view>
							<view
								@click="redirectToLink('/otherpages/diy/diy/diy?name=DIY_VIEW_RANDOM_1667016308&buy=0&vip=1')">
								<view>拼团活动</view>
								<view>点击参与</view>
							</view>
						</view>
					</view>
					<view class="flex-active" v-else-if="curIndex == 2">
						<image class="flex-active-bg"
							src="https://wanzhi.daqinfarmer.com//public/images/191682327486.png" mode=""></image>
						<view class="flex-active-img" v-if="vipId == levelId">
							<view @click="redirectToLink('/otherpages/diy/diy/diy?name=DIY_VIEW_RANDOM_1667016334')">
								<view>限时折扣</view>
								<view>立即抢购</view>
							</view>
							<view @click="redirectToLink('/otherpages/diy/diy/diy?name=DIY_VIEW_RANDOM_1667016357')">
								<view>拼团活动</view>
								<view>点击参与</view>
							</view>
						</view>
						<view class="flex-active-img" v-else>
							<view
								@click="redirectToLink('/otherpages/diy/diy/diy?name=DIY_VIEW_RANDOM_1667016334&buy=0&vip=2')">
								<view>限时折扣</view>
								<view>立即抢购</view>
							</view>
							<view
								@click="redirectToLink('/otherpages/diy/diy/diy?name=DIY_VIEW_RANDOM_1667016357&buy=0&vip=2')">
								<view>拼团活动</view>
								<view>点击参与</view>
							</view>
						</view>
					</view>

					<view style="height: 40rpx;clear:both;"></view>
				</view>


				<view class="card-content1" v-if="goods_count > 0">
					<view class="card-content-head">
						<image class="line" src="https://wanzhi.daqinfarmer.com/public/images/101682320918.png"></image>
						<view class="card-content-title">会员产品区</view>
						<image class="line" src="https://wanzhi.daqinfarmer.com/public/images/431682320999.png"></image>
					</view>

					<view class="card_goods_list">
						<view class="card_goods_children" v-for="(item,i) in goodsList" :key="i"
							@click="toDetail(item)">
							<view class="goods_img">
								<image class="goods_img_bg"
									src="https://wanzhi.daqinfarmer.com/public/images/431682332497.png" mode=""></image>
								<image class="goods_imgs" :src="item.sku_image" alt=""></image>
								<view class="price">
									<text v-if="item.zt == 1"><text style="font-size: 20rpx;">￥</text>{{item.member_price*bili}}</text>
									<text v-else><text style="font-size: 20rpx;">￥</text>{{item.member_price}}</text>
									<!-- <del>￥{{item.price}}</del> -->
								</view>
							</view>
							<view class="container">
								<view class="goods_name">
									{{item.goods_name}}
								</view>

								<view class="card_goods_buy">
									<button v-if="item.stock > 0">立即购买</button>
									<button class="endbtn" v-else>已售罄</button>
								</view>
							</view>
						</view>
						<view style="height: 40rpx;clear:both;"></view>
					</view>
				</view>

				<block v-if="currCard.charge_rule_arr.length">
					<view class="action-wrap" :class="{ 'bottom-safe-area': isIphoneX, 'have-agreement': agreement }">
					</view>
					<view class="action" :class="{ 'bottom-safe-area': isIphoneX, 'have-agreement': agreement }">
						<view class="action-btn" @click="create">
							<block v-if="currCard.level_id == levelId">
								<text class="bold title">立即续费</text>
							</block>
							<block v-else>
								<text class="bold title" v-if="currCard.charge_type == 1">充值开通</text>
								<text class="bold title" v-else>立即开通</text>
							</block>
							<text class="font-size-tag">{{ $lang('common.currencySymbol') }}</text>
							<text class="bold">{{ currCard.charge_rule_arr[choiceIndex].value }}</text>
							<text>/{{ cardType[currCard.charge_rule_arr[choiceIndex].key].unit }}</text>
						</view>
						<view class="agreement" v-if="agreement">
							<view class="agreement_tip" @click="isChecked = !isChecked">
								<text class="iconfont iconyuan_checkbox font-size-tag" v-if="!isChecked"></text>
								<text class="iconfont iconyuan_checked font-size-tag" v-if="isChecked"></text>
								<view style="color: #ececec;">
									购买既视为同意
									<text
										@click="$util.redirectTo('/otherpages/member/card_agreement/card_agreement')">《{{ agreement.title }}》</text>
								</view>
							</view>
						</view>
					</view>
				</block>
			</view>


			<!-- 弹出规则 -->
			<view @touchmove.prevent.stop>
				<uni-popup ref="explainPopup" type="bottom">
					<view class="tips-layer">
						<view class="head" @click="closeExplainPopup()">
							<view class="title">会员卡说明</view>
							<text class="iconfont iconclose"></text>
						</view>
						<view class="body">
							<view class="detail margin-bottom">
								<block v-if="currCard.remark != ''">
									<view class="tip">会员卡说明</view>
									<view class="font-size-base">{{ currCard.remark }}</view>
								</block>
							</view>
						</view>
					</view>
				</uni-popup>
			</view>

			<ns-payment ref="choosePaymentPopup" :payMoney="currCard.charge_rule_arr[choiceIndex].value"
				@confirm="toPay" v-if="currCard.charge_rule_arr.length"></ns-payment>
		</block>
		<block v-else>
			<ns-empty text="暂无可开会员卡" :isIndex="!1"></ns-empty>
		</block>

		<ns-login ref="login"></ns-login>
		<loading-cover ref="loadingCover"></loading-cover>
		<!-- 选择支付方式弹窗 -->
	</view>
</template>

<script>
	import globalConfig from '@/common/js/golbalConfig.js';
	import scroll from '@/common/js/scroll-view.js';
	import uniPopup from '@/components/uni-popup/uni-popup.vue';
	import nsPayment from '@/components/payment/payment.vue';


	import diyCoupon from '@/components/diy-coupon/diy-coupon.vue';

	export default {
		components: {
			nsPayment,
			uniPopup,
			diyCoupon
		},
		mixins: [scroll, globalConfig],
		data() {
			return {
				point: 0, //积分
				isChecked: false,
				vipname: '',
				isSub: false, // 是否已提交
				isIphoneX: false,
				couponPopList: [],
				curIndex: 0,
				isDescAnimating: false,
				scaleX: (634 / 540).toFixed(4),
				scaleY: (378 / 330).toFixed(4),
				swiperConfig: {
					indicatorDots: false,
					indicatorColor: 'rgba(255, 255, 255, .4)',
					indicatorActiveColor: 'rgba(255, 255, 255, 1)',
					interval: 3000,
					duration: 300,
					circular: false,
					previousMargin: '40rpx',
					nextMargin: '40rpx'
				},
				levelList: [],
				levelId: 0,
				userInfo: {},
				cardType: {
					week: {
						name: "周卡",
						unit: '周'
					},
					month: {
						name: "月卡",
						unit: '月'
					},
					quarter: {
						name: "季卡",
						unit: '季'
					},
					year: {
						name: "年卡",
						unit: '年'
					}
				},
				choiceIndex: 0,
				outTradeNo: '',
				agreement: null,
				token: '',
				couponList: [],
				vipId: 0,
				isHave: true,
				couponBtnSwitch: false,
				isSuccess: false,
				page: 1,
				goods_count: 0,
				goods_ids: 0,
				goodsList: [],
				bili: 0,
				totalPage: 0,
				send_coupon: 0,
				baseActiveImgA: '',
				baseActiveImgB: ''
			};
		},
		computed: {

			listLen() {
				return this.levelList.length;
			},

			currCard() {
				if (this.levelList[this.curIndex]) {
					let card = this.levelList[this.curIndex];
					let charge_rule = card.charge_rule ? JSON.parse(card.charge_rule) : {};
					card.charge_rule_arr = [];
					Object.keys(charge_rule).forEach((key) => {
						card.charge_rule_arr.push({
							'key': key,
							'value': charge_rule[key]
						})
					})
					return card;
				}
			},

			storeToken() {
				return this.$store.state.token;
			},

			computedCouponList() {
				var list = [];
				this.couponList.filter(function(item) {
					if (item.count != item.lead_count) list.push(item);
				});
				return list;
			}

		},
		created() {
			setTimeout(val => {
				this.page = 1
				this.goodsList = []
				this.getGoodsList();
				this.getCanReceiveCouponQuery();
			}, 1500)
		},
		onLoad() {
			//会员卡
			this.isIphoneX = this.$util.uniappIsIPhoneX();
			this.$langConfig.refresh();
			if (uni.getStorageSync('token')) {
				this.getCardList();
			} else {
				setTimeout(() => {
					this.$refs.login.open('/otherpages/member/card_buy/card_buy');
				});
			}
			this.getAccountInfo()
			this.getAgreement();
		},
		onShow() {
			this.getMemberInfo();

			this.baseActiveImgA = this.$config.baseUrl + '/upload/xszk.png';
			this.baseActiveImgB = this.$config.baseUrl + '/upload/pint.png';
			console.log(this.baseActiveImgA)
			console.log(this.baseActiveImgB)
		},
		watch: {
			storeToken: function(nVal, oVal) {
				if (nVal) {
					this.getCardList();
				}
			}
		},
		onReachBottom() {
			this.page++;
			if (this.page > this.totalPage) {
				return false
			} else {
				this.getGoodsList();
			}
		},
		methods: {
			jumpPage(url) {
				this.$util.redirectTo(url);
			},
			//获取个人积分
			getAccountInfo() {
				this.$api.sendRequest({
					url: '/api/memberaccount/info',
					data: {
						account_type: 'point'
					},
					success: res => {
						if (res.code == 0 && res.data) {
							this.point = parseFloat(res.data.point).toFixed(0);
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
					}
				});
			},
			redirectToLink(url) {
				this.$util.redirectTo(url);
			},
			getGoodsList() {
				var data = {
					page: this.page,
					page_size: 10,
					card_vip: 1,
					goods_ids: this.goods_ids
				};

				this.$api.sendRequest({
					url: '/api/goodssku/page',
					data: data,
					success: res => {
						// console.log(res)
						let rows = res.data.list
						this.goodsList = this.goodsList.concat(rows);

						console.log(this.goodsList)
						this.totalPage = res.data.page_count

						this.goods_count = res.data.count

					},
					fail: res => {

					}
				});
			},
			toDetail(e) {

				if (e.zt == 1) {
					this.$util.showToast({
						title: '该商品未参与会员折扣！'
					});
					return false
				}

				this.$util.redirectTo('/pages/goods/detail/detail', {
					sku_id: e.sku_id,
					vip_zt: e.zt,
					vipname: this.vipname
				});
			},
			couponTap(item, index) {
				if (item.count == item.lead_count) {
					this.$util.showToast({
						title: '该优惠券已抢光'
					});
					return;
				}
				if (item.useState == 0) this.receiveCoupon(item, index);
				else this.toGoodsList(item);
			},
			getCanReceiveCouponQuery() {
				var data = {
					page: 1,
					page_size: 100,
					can_receive: 1,
					send_coupon: this.send_coupon
				};

				this.$api.sendRequest({
					url: '/coupon/api/coupon/typepagelists',
					data: data,
					success: res => {
						let data = res.data;
						if (data != null) {
							this.couponList = data.list;
							this.couponList.forEach(v => {
								v.useState = 0;
							});
						}
					}
				});
			},
			// 领取优惠券
			receiveCoupon(item, index) {
				if (this.couponBtnSwitch) return;
				this.couponBtnSwitch = true;
				let token = uni.getStorageSync('token');
				if (token != '') {
					this.$api.sendRequest({
						url: '/coupon/api/coupon/receive',
						data: {
							coupon_type_id: item.coupon_type_id,
							level_id: this.vipId,
							get_type: 2 //获取方式:1订单2.直接领取3.活动领取
						},
						success: res => {
							var data = res.data;
							let msg = res.message;
							if (res.code == 0) {
								msg = '领取成功';
								let list = this.couponList;
								if (res.data.is_exist == 1) {
									for (let i = 0; i < list.length; i++) {
										if (list[i].coupon_type_id == item.coupon_type_id) {
											list[i].useState = 1;
										}
									}
								} else {
									for (let i = 0; i < list.length; i++) {
										if (list[i].coupon_type_id == item.coupon_type_id) {
											list[i].useState = 2;
										}
									}
								}
							}
							this.$util.showToast({
								title: msg
							});
							this.couponBtnSwitch = false;
							this.$forceUpdate();
						},
						fail: res => {
							this.couponBtnSwitch = false;
						}
					});
				} else {
					this.$refs.login.open('/pages/index/index/index');
					this.couponBtnSwitch = false;
				}
			},
			buyCard() {
				this.$util.showToast({
					title: "请点击下方按钮购买" + this.vipname + "会员卡"
				});
			},
			//去使用
			toGoodsList(item) {
				if (item.goods_type != 1) {
					this.$util.redirectTo('/pages/goods/list/list', {
						coupon: item.coupon_type_id
					});
				} else {
					this.$util.redirectTo('/pages/goods/list/list', {});
				}
			},

			swiperChange(e) {
				// console.log(e)
				let that = this;
				this.curIndex = e.detail.current;
				console.log(this.curIndex, 'zhuangtai')
				this.choiceIndex = 0;
				this.isDescAnimating = true;

				this.page = 1
				this.goodsList = []
				this.vipId = this.levelList[e.detail.current].level_id
				this.send_coupon = this.levelList[e.detail.current].send_coupon

				this.vipname = this.levelList[e.detail.current].level_name


				this.bili = this.levelList[e.detail.current].consume_discount / 100

				console.log(this.bili, "BBB")

				this.goods_ids = this.levelList[e.detail.current].goods_ids
				this.getGoodsList();
				this.getCanReceiveCouponQuery();
			},
			animationfinish(e) {
				this.isDescAnimating = false;
			},
			getCardList() {
				this.$api.sendRequest({
					url: '/supermember/api/membercard/lists',
					success: res => {
						if (res.code == 0 && res.data) {
							this.levelList = res.data;

							// console.log(res.data[0].level_id)
							this.vipId = res.data[0].level_id
							this.send_coupon = res.data[0].send_coupon
							this.vipname = res.data[0].level_name
							if (this.bili == 0) {
								this.bili = res.data[0].consume_discount / 100
							}

							console.log(this.bili, "AAA")

							// console.log(res.data[0].goods_ids)
							this.goods_ids = res.data[0].goods_ids
							this.getMemberInfo();
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			getMemberInfo() {
				this.$api.sendRequest({
					url: '/api/member/info',
					success: res => {
						if (res.data && res.code == 0) {
							this.levelId = res.data.member_level;
							this.userInfo = res.data;
							this.levelList.forEach((v, i) => {
								if (v.level_id == res.data.member_level) {
									this.curIndex = i;
									return;
								}
							});
						} else {
							this.$util.showToast({
								title: res.message
							});
						}
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					},
					fail: res => {
						if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
					}
				});
			},
			choice(index) {
				this.choiceIndex = index;
			},
			/**
			 * 创建
			 */
			create() {

				console.log(this.userInfo.realname)
				console.log(this.userInfo.mobile)
				console.log(this.userInfo.company)
				if (!this.isChecked) {
					this.$util.showToast({
						title: '请勾选开卡协议'
					});
					return false
				}
				if (!this.userInfo.realname || !this.userInfo.mobile || !this.userInfo.company || !this.userInfo
					.birthday) {
					uni.showModal({
						title: '提示',
						confirmText: '去完善',
						cancelText: '取消',
						content: '请完善个人信息！',
						success: res => {
							if (res.confirm) {
								this.$util.redirectTo('/otherpages/member/info/info', {}, 'navigateTo');
								return true;
							}
						}
					})
					return false
				}

				if (this.userInfo.member_level_type && this.userInfo.member_level != this.currCard.level_id) {
					uni.showModal({
						title: '提示',
						content: '您有尚未过期的会员卡，再次购卡会覆盖掉之前的卡，是否继续？',
						success: res => {
							if (res.confirm) {
								this.$refs.choosePaymentPopup.open();
							}
						}
					})
				} else {
					this.$refs.choosePaymentPopup.open();
				}
			},
			/**
			 * 提交
			 */
			toPay() {

				if (this.isSub) return;
				this.isSub = true;

				this.$api.sendRequest({
					url: '/supermember/api/ordercreate/create',
					data: {
						level_id: this.currCard.level_id,
						period_unit: this.currCard.charge_rule_arr[this.choiceIndex].key
					},
					success: res => {
						if (res.data && res.code == 0) {
							this.outTradeNo = res.data.out_trade_no;
							uni.setStorageSync('paySource', 'membercard');
							this.$refs.choosePaymentPopup.getPayInfo(this.outTradeNo);
						} else {
							this.isSub = false;
							this.$util.showToast({
								title: res.message
							});
						}
					}
				});
			},
			headimgError() {
				this.userInfo.headimg = this.$util.getDefaultImage().default_headimg;
			},
			/**
			 * 打开说明弹出层
			 */
			openExplainPopup() {
				this.$refs.explainPopup.open();
			},
			/**
			 * 打开说明弹出层
			 */
			closeExplainPopup() {
				this.$refs.explainPopup.close();
			},
			getAgreement() {
				this.$api.sendRequest({
					url: '/supermember/api/membercard/agreement',
					success: res => {
						if (res.code == 0 && res.data && res.data.title != '' && res.data.content != '') {
							this.agreement = res.data;
						}
					}
				});
			}
		},
		onBackPress(options) {
			if (options.from === 'navigateBack') {
				return false;
			}
			this.$util.redirectTo('/pages/member/index/index', {}, 'reLaunch');
			return true;
		}
	};
</script>

<style lang="scss">
	@import '../public/css/card.scss';

	.flex-active {
		position: relative;

		.flex-active-bg {
			width: 100%;
			height: 246rpx;
		}

		.flex-active-img {
			position: absolute;
			top: 0rpx;
			left: 6%;
			width: 90%;
			display: flex;
			justify-content: space-between;

			>view {
				width: 50%;
				text-align: center;
				margin-top: 45rpx;

				view:first-child {
					font-size: 36rpx;
					font-weight: bold;
					color: #FFE9CA;
					background: linear-gradient(0deg, #FFE9CA 0%, #FFF8EE 100%);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;
				}

				view:last-child {
					width: 127rpx;
					height: 28rpx;
					margin: 0 auto;
					margin-top: 15rpx;
					background: #FFE9CA;
					border-radius: 14rpx;
					font-size: 22rpx;
					color: #C3362D;
					text-align: center;
					line-height: 28rpx;
				}
			}

		}
	}

	.card_goods_list {
		width: 92%;
		margin: 0 auto;

		.card_goods_children {
			width: 48%;
			display: inline-block;
			float: left;
			background-color: #FFFFFF;
			border-radius: 10rpx;
			margin-bottom: 3%;

			.goods_img {
				width: 100%;
				position: relative;
				height: 250rpx;
				border-radius: 10rpx 10rpx 0 0;

				.goods_imgs {
					width: 100%;
					height: 100%;
				}

				.goods_img_bg {
					position: absolute;
					width: 100%;
					height: 100%;
					left: 0rpx;
					top: 0rpx;
				}
				.price {
					position: absolute;
					bottom: 5rpx;
					left: 0rpx;
					font-size: 30rpx;
					color: #57270F;
					font-weight: 600;
					font-style: italic;
				}
			}

			.container {
				padding-bottom:20rpx; 
				.goods_name {
					color: #333333;
					font-size: 30rpx;  
					margin-top: 15rpx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}

				

				.card_goods_buy {
					text-align: center;

					.endbtn {
						background: #f2f2f2;
						color: #333333;
					}

					button {
						width: 155rpx;
						height: 44rpx;
						background: linear-gradient(-90deg, #DEA266, #EFE0B0);
						border-radius: 22rpx;
						font-size: 24rpx; 
						font-weight: 400;
						color: #57270F;
						line-height: 44rpx;
						margin-left: 0rpx;
					}
				}
			}
		}

		.card_goods_children:nth-child(2n) {
			float: right;
		}
	}

	/* 样式一 */
	.coupon-all {
		width: 100%;
		flex-direction: row;
		white-space: nowrap;
		box-sizing: border-box;
		line-height: 1;
	}

	.coupon-box {
		display: inline-block;
		position: relative;
		margin-right: 22rpx;
	}

	.coupon-box:nth-child(3n) {
		margin-right: 0;
	}

	.coupon-list {
		position: relative;
	}

	.coupon-bg {
		width: 254rpx;
		height: 114rpx;
	}

	.coupon {
		width: 254rpx;
		height: 114rpx;
		border-radius: $border-radius;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		position: absolute;
		left: 0;
		top: 0;

		.coupon-info {
			width: 38%;
			height: 100%;
			padding: 10rpx 15rpx;
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.coupon-type {
				color: #7A4023;
				font-size: $font-size-activity-tag;
				text-align: center;
				overflow: hidden;
				white-space: nowrap;
			}

			.coupon-num {
				display: flex;
				align-items: flex-end;
				justify-content: center;
				margin-bottom: 10rpx;

				.coupon-sign {
					margin-bottom: 4rpx;
				}

				.coupon-size {
					font-size: 40rpx;
					font-weight: bold;
				}

				text {
					line-height: 1;
					color: #7A4023;
				}
			}
		}

		.coupon-get {
			width: 62%;
			height: 100%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;

			view {
				line-height: 1.5;
				color: #7A4023;
				font-size: $font-size-tag;
			}

			.btn_coupon {
				background: #F2DFB8;
				border-radius: 25rpx;
				margin-top: 15rpx;
				padding: 10rpx 20rpx;
			}
		}
	}

	.coupon-shu {
		width: 702rpx;
		height: 294rpx;
		margin: 0 auto;
		padding: 24rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
		flex-direction: row;
		white-space: nowrap;

		.shu-item {
			width: 202rpx;
			height: 294rpx;
			display: inline-block;
			margin-right: 24rpx;
			background-repeat: no-repeat;
			background-size: 100% 100%;
			background-position: 0 -48rpx;
			border-radius: 10rpx;
			overflow: hidden;

			.item-num {
				line-height: 1;
				margin-top: 35rpx;
				width: 100%;
				text-align: center;

				.coupon-size {
					font-size: 40rpx;
				}
			}
		}

		.item-type {
			line-height: 1;
			margin-top: 22rpx;
			width: 100%;
			text-align: center;
			font-size: $font-size-goods-tag;

			.item-text {
				font-size: $font-size-goods-tag;
				color: #838383;
				width: 100%;
				text-align: center;
				line-height: 1;
				margin-top: 15rpx;
			}
		}

		.item-btn {
			width: 120rpx;
			height: 46rpx;
			line-height: 1;
			color: #fff;
			border-radius: 23rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			margin-top: 22rpx;
		}
	}

	// 风格四
	.coupon-style-four {
		.coupon-list {
			font-size: 0;

			>image {
				width: 315rpx;
				height: 122rpx;
			}

			.coupon {
				width: 315rpx;
				height: 122rpx;

				.coupon-info {
					padding: 0;

					.coupon-num {
						margin-top: 4rpx;
						margin-bottom: 0;
					}

					.coupon-size {
						font-size: 48rpx;
						line-height: 1;
					}

					.coupon-type {
						line-height: 1.5;
						margin-top: 16rpx;
						color: #7A4023;
					}
				}

				.coupon-get {

					view {
						font-size: 20rpx;
						line-height: 1;
					}
				}
			}
		}
	}

	.card-privilege-text {
		margin-top: 12rpx;
	}

	.zhe {
		// background: #E8BF79;
		background-image: linear-gradient(#E8BF79, #FFFFFF);
		border-radius: 50%;
		width: 62rpx;
		height: 62rpx;
		line-height: 62rpx;
		color: #FFFFFF;
		font-size: 32rpx;
	}
</style>